{{inc Index/jqui}}
<script>
    $(function() {
        var sortable=$( "#sortable" );
        sortable.sortable();
        sortable.disableSelection();
        sortable.bind('sortstop', function(event, ui) {
            var rel=[];
            var lis=sortable.children('li');
            $(lis).each(function (index,domEle){
                //index就是索引值
                //domEle 表示获取遍历每一个dom对象
                domEle=$(domEle);
                rel.push(domEle.html());
            });
            rel=rel.join(',');
            $('#col-order').val(rel);
        });
    });
</script>
<div class="container">
    <div class="panel panel-primary"  style="margin-left: 100px;max-width: 1000px;min-height: 200px;margin-top: 60px">
        <div class="panel-heading">
            <h3 class="panel-title">CURD代码生成辅助工具[步骤三]</h3>
        </div>
        <div class="panel-body">
            <form id="frm" action="" method="get" class="form-horizontal" role="form">
                <!--隐藏表单域-->
                {{hidden $hiddens}}
                <div class="form-group">
                    <label for="col-pk" class="col-sm-2 control-label">选择主键</label>
                    <div class="col-sm-10">
                        <select name="col-pk" id="col-pk" class="form-control">
                            {{each $cols}}
                            <option value="{{:k}}"> {{:k}} </option>
                            {{/}}
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="col-order-by" class="col-sm-2 control-label">多记录按</label>
                    <div class="col-sm-3">
                        <select name="col-order-by" id="col-order-by" class="form-control">
                            {{each $cols}}
                            <option value="{{:k}}"> {{:k}} </option>
                            {{/}}
                        </select>
                    </div>
                    <label for="col-order-rule" class="col-sm-1 control-label">的</label>
                    <div class="col-sm-2">
                        <select name="col-order-rule" id="col-order-rule" class="form-control">
                            <option value="desc"> 降 </option>
                            <option value="asc"> 升 </option>
                        </select>
                    </div>
                    <label  class="col-sm-1 control-label">序 排序</label>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">每页记录数</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" name="model-page-num" value="10" required placeholder="建议 10">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">拖拽排序</label>
                    <div class="col-sm-10">
                        <ul id="sortable" class="list-group ">
                            {{each $cols}}
                            <li class="list-group-item">{{:k}}</li>
                            {{/}}
                        </ul>
                    </div>
                </div>
                <div class="form-group">
                    <label for="col-order" class="col-sm-2 control-label">排序结果</label>
                    <div class="col-sm-10">
                        <input type="text" readonly required name="col-order" class="form-control" id="col-order" value="{{:col_order}}" placeholder="排序结果">
                    </div>
                </div>


                <div class="form-group" id="grp-next">
                    <div class="col-sm-10 col-sm-offset-2">
                        <button type="submit" class="btn btn-primary" id="btn-next">下一步</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    $(function () {

    });

</script>